<template>
    <div>
        <el-dialog
            :title="titles"
            :visible.sync="visible"
            width="1200px"
            @closed="onCancel"
            destroy-on-close
        >
            <div v-loading="loading">
                <div class="checkList" v-if="typeList && typeList.length > 1">
                    <div
                        class="item"
                        v-for="(item, index) in typeList"
                        :class="[activeChecked == item.value ? 'active' : '']"
                        @click="checkType(item, index)"
                    >
                        {{ item.label }}
                    </div>
                </div>

                <SearchForm
                    @reset="reset"
                    @search="search"
                    ref="search"
                    gap="10px 0"
                >
                    <FormItem
                        v-for="item in SearchFormItems"
                        :key="item.label"
                        v-model="queryParams"
                        :FormItem="item"
                        @FormItem="(val) => (item = val)"
                    ></FormItem>
                    <!-- :formData="queryParams" -->
                </SearchForm>

                <div class="tablePage" :key="activeType">
                    <table-page
                        ref="table"
                        :dataList="datalist"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        :border="true"
                        @setSizeCurrent="pageConfigChange"
                        :isSelect="selection"
                        @selectionChange="selectionChange"
                        :config="{
                            style: {
                                minHeight: '410px',
                            },
                        }"
                    >
                        <!-- 操作插槽 -->
                        <template slot="tableColAc">
                            <el-table-column
                                label="序号"
                                align="center"
                                type="index"
                                width="80"
                            >
                                <template slot-scope="scope">
                                    <span v-if="index(scope.$index) <= 999">
                                        {{ index(scope.$index) }}
                                    </span>
                                    <span v-else>
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="index(scope.$index)"
                                            placement="top"
                                        >
                                            <span>...</span>
                                        </el-tooltip>
                                    </span>
                                </template>
                            </el-table-column>
                            <TableColumn
                                v-for="item in tableItem"
                                :cellOptions="item"
                            ></TableColumn>
                            <!-- <el-table-column -->
                            <!-- v-for="item in tableItem" -->
                            <!-- :label="item.label" -->
                            <!-- align="center" -->
                            <!-- > -->
                            <!-- <template slot-scope="scope"> -->
                            <!-- <div> -->
                            <!-- {{ scope.row[item.prop] }} -->
                            <!-- </div> -->
                            <!-- </template> -->
                            <!-- </el-table-column> -->
                            <!--  -->
                            <el-table-column
                                align="center"
                                label="操作"
                                width="150"
                            >
                                <template slot-scope="scope">
                                    <div>
                                        <el-button
                                            v-if="type !== 'Tips'"
                                            type="text"
                                            @click="onSelect(scope.row)"
                                        >
                                            选择
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </template>
                    </table-page>
                </div>
            </div>
            <div class="handleBox" slot="footer" v-if="selection">
                <el-button type="" size="mini" @click="handle_no">
                    {{ toastFailBtn }}
                </el-button>
                <el-button type="primary" size="mini" @click="handle_sure">
                    {{ toastSureBtn }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as apis from "@/api/finance/reimburs/template/api.js";
import FormItem from "../formItem/index.vue";
import TableColumn from "@/views/finance/manage/tableColumn/index.vue";
import {
    getQueryModelByIdList,
    getSeriesName,
    getModelName,
    getBrandName,
    addModelCar,
    getModelCar,
    deleteCar,
} from "@/api/globalField";
export default {
    inheritAttrs: false,
    components: { FormItem, TableColumn },
    data() {
        return {
            title: "",
            type: "",
            typeList: [],
            params: {},
            visible: false,
            loading: true,
            total: 0,
            datalist: [],
            activeChecked: 0,
            activeType: "",
            SearchFormItems: [],
            tableItem: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            selectArr: [],
            selection: false,
            toastSureBtn: "",
            toastFailBtn: "",
            checkTypeList: [],
            brandList: [],
            seriesList: [],
            modelList: [],

            dicts: { customer_level: [] },
        };
    },
    computed: {
        titles() {
            let word = this.typeList?.reduce((prev, next) => {
                return `${prev}${prev ? "/" : ""}${next.label}`;
            }, "");
            return this.title || `请选择${word}`;
        },
    },
    created() {
        this.init();
    },
    mounted() {},

    methods: {
        pageConfigChange() {
            this.getList();
        },
        index(index) {
            let num =
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize +
                index +
                1;
            return num?.toString();
        },
        selectionChange(val) {
            this.selectArr = val;
        },
        init() {
            this.inteCheckOptions();
            this.initTypeList();
            this.initTableCloumn();
            this.getList();
        },
        inteCheckOptions() {
            this.checkTypeList = [
                { label: "订单", type: "Order" },
                { label: "车辆", type: "Car" },
                { label: "车辆", type: "QuotaCar" },
                { label: "车型", type: "QuotaCarType" },
                { label: "用户", type: "User" },
                { label: "用户", type: "UserNo" },
                { label: "订单", type: "FinanceOrder" },
                { label: "车辆", type: "FinanceCar" },
            ];
            this.checkTypeList.forEach((item, index) => {
                item.value = index;
            });
        },
        initTypeList() {
            let menus = [],
                types = [];
            if (typeof this.type == "string") {
                types = this.type.split(",");
            }
            types?.map((item) => {
                if (item !== "") {
                    let e = this.checkTypeList?.find(
                        (c) =>
                            item?.toLocaleLowerCase() ==
                            c?.type?.toLocaleLowerCase()
                    );
                    if (e) {
                        menus.push(e);
                    } else {
                        console.error(`未配置${item}列表`);
                    }
                }
            });
            this.activeChecked = menus?.[0]?.value;
            this.activeType = menus?.[0]?.type;
            this.typeList = menus;
        },
        indexMethod(index) {
            return (
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize +
                index +
                1
            );
        },
        checkType(row, index) {
            if (this.activeChecked !== row.value) {
                this.activeChecked = row.value;
                this.activeType = row.type;
                this.initQueryParams();
                this.initSelectState();
                this.initTableCloumn();
                this.getList();
            }
        },
        initSelectState() {
            this.selectArr = [];
            this.$refs.table?.table_clearSelection();
        },
        initQueryParams() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            };
        },
        async initTableCloumn() {
            this.initQueryParams();
            let type = this.activeType;
            switch (type?.toLocaleLowerCase()) {
                // 选择订单
                case "order":
                case "financeorder":
                    this.getOrderQueryForm();
                    this.getOrderTableCloumn();
                    break;
                case "car":
                case "financecar":
                    this.getCarQueryForm();
                    this.getCarTableCloumn();
                    break;
                case "quotacar":
                    this.getQuotaCarQueryForm();
                    this.getQuotaCarTableCloumn();
                    break;
                case "quotacartype":
                    this.getName();
                    this.getQuotaCarTypeQueryForm();
                    this.getQuotaCarTypeTableCloumn();
                    break;
                case "company":
                    this.getCompanyQueryForm();
                    this.getCompanyTableCloumn();
                    break;
                case "user":
                    await this.getUserQueryForm();
                    this.getUserTableCloumn();
                    break;
                case "userno":
                    await this.getUserQueryForm();
                    this.getUserTableCloumn();
                    break;
                case "Tips":
                default:
                    () => {};
            }
            // this.$refs?.search?.resize?.();
        },

        getList() {
            this.loading = true;
            let type = this.activeType;
            return new Promise(async (res) => {
                let data = this.params[`_${type}`];

                let params = Object.assign(
                    {},
                    this.queryParams,
                    data ?? this.params
                );
                switch (type?.toLocaleLowerCase?.()) {
                    // HealthManage
                    case "order":
                        await this.getOrderList(params);
                        break;
                    case "car":
                        await this.getCarList(params);
                        break;
                    case "quotacar":
                        await this.getQuotaCarList(params);
                        break;
                    case "quotacartype":
                        await this.getQuotaCarTypeList(params);
                        break;
                    case "company":
                        await this.getCompanyList(params);
                        break;
                    case "user":
                        await this.getUserList(params);
                        break;
                    case "userno":
                        await this.getUserNoList(params);
                        break;
                    case "financeorder":
                        await this.getFinanceOrderList(params);
                        break;
                    case "financecar":
                        await this.getFinanceCarList(params);
                        break;
                    default:
                        () => {};
                }
                this.loading = false;
                res();
            });
        },
        // 获取车辆
        getCarQueryForm() {
            // 初始化搜索条件
            this.SearchFormItems = [
                {
                    label: "车牌号:",
                    prop: "carNo",
                    type: "input",
                },
                {
                    label: "车架号:",
                    prop: "vinNo",
                    type: "input",
                },
            ];
        },
        getCarTableCloumn() {
            // 初始化表格列
            this.tableItem = [
                {
                    label: "车型",
                    prop: "modelName",
                },
                {
                    label: "车牌号",
                    prop: "carNo",
                },
                {
                    label: "车架号",
                    prop: "vinNo",
                },
                {
                    label: "客户",
                    prop: "customerName",
                },
                {
                    label: "车辆类型",
                    prop: "carType",
                },
                {
                    label: "登记类型",
                    format: (row) => {
                        let word = "";
                        switch (row.carNature) {
                            case "1":
                                word = "营运";
                                break;
                            case "2":
                                word = "非营运";
                                break;
                            default:
                                break;
                        }
                        return word;
                    },
                },
                {
                    label: "所属公司",
                    prop: "ascription",
                },
            ];
        },
        getCarList(params) {
            return new Promise((resolve) => {
                apis.CarList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally((res) => {
                        resolve();
                    });
            });
            // 获取表格数据

            // healthManage_template(this.queryParams)
            //     .then((res) => {

            //     })
            //     .finally(() => {
            //         this.loading = false;
            //     });
        },

        // 获取订单
        getOrderQueryForm() {
            // 初始化搜索条件
            this.SearchFormItems = [
                {
                    label: "订单编号:",
                    prop: "orderCarCode",
                    type: "input",
                },
                {
                    label: "车牌号:",
                    prop: "carPlateNo",
                    type: "input",
                },
                {
                    label: "车架号:",
                    prop: "carVinNo",
                    type: "input",
                },
                {
                    label: "采购编号:",
                    prop: "d",
                    type: "input",
                },
            ];
        },
        getOrderTableCloumn() {
            // 初始化表格列
            this.tableItem = [
                {
                    label: "订单编号",
                    prop: "orderCarCode",
                },
                {
                    label: "采购编号",
                    prop: "sex",
                },
                {
                    label: "车牌号",
                    prop: "carPlateNo",
                },
                {
                    label: "客户",
                    prop: "leaseeName",
                },
                {
                    label: "车架号",
                    prop: "carVinNo",
                },
                {
                    label: "车型",
                    prop: "carModelName",
                },
                {
                    label: "所属公司",
                    prop: "lessorName",
                },
            ];
        },
        getOrderList(params) {
            return new Promise((resolve) => {
                apis.OrderList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally((res) => {
                        resolve();
                    });
            });
        },
        // 获取公司
        getCompanyQueryForm() {},
        getCompanyTableCloumn() {
            this.tableItem = [
                {
                    label: "姓名",
                    prop: "name",
                },
                {
                    label: "性别",
                    prop: "sex",
                },
                {
                    label: "年龄",
                    prop: "age",
                },
                {
                    label: "电话",
                    prop: "phone",
                },
                {
                    label: "住址",
                    prop: "address",
                },
            ];
        },
        getCompanyList(params) {
            return new Promise((resolve) => {
                apis?.CompanyList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally(() => {
                        resolve();
                    });
            });
        },
        // 额度车辆
        getQuotaCarQueryForm() {},
        getQuotaCarTableCloumn() {
            this.tableItem = [
                {
                    label: "姓名",
                    prop: "name",
                },
                {
                    label: "性别",
                    prop: "sex",
                },
                {
                    label: "年龄",
                    prop: "age",
                },
                {
                    label: "电话",
                    prop: "phone",
                },
                {
                    label: "住址",
                    prop: "address",
                },
            ];
        },

        getQuotaCarList(params) {
            return new Promise((resolve) => {
                apis.QuotaCarList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally((res) => {
                        resolve();
                    });
            });
        },
        getName() {
            getBrandName([]).then((res) => {
                this.brandList = res;
                this.getQuotaCarTypeQueryForm();
            });
        },
        getSeriesName() {
            if (this.queryParams.brandIds.length > 0) {
                getSeriesName(this.queryParams.brandIds).then((res) => {
                    this.seriesList = res;
                    this.getQuotaCarTypeQueryForm();
                });
            } else {
                this.queryParams.seriesIds = [];
                this.queryParams.modelIds = [];
                this.modelList = [];
                this.seriesList = [];
            }
        },
        getModelName() {
            if (this.queryParams.seriesIds.length > 0) {
                getModelName(this.queryParams.seriesIds).then((res) => {
                    this.modelList = res;
                    this.getQuotaCarTypeQueryForm();
                });
            } else {
                this.queryParams.modelIds = [];
                this.modelList = [];
            }
        },
        // 额度车型
        getQuotaCarTypeQueryForm() {
            this.SearchFormItems = [
                {
                    label: "品牌:",
                    prop: "brandIds",
                    type: "select",
                    selectList: this.brandList,
                    selectLabel: "name",
                    selectValue: "id",
                    prototype: {
                        multiple: true,
                        collapseTags: true,
                    },
                    event: {
                        type: "change",
                        cb: (row) => {
                            if (this.notEmpty(row.brandIds)) {
                                this.getSeriesName();
                            } else {
                                this.queryParams.seriesIds = undefined;
                                this.seriesList = [];
                                this.queryParams.modelIds = undefined;
                                this.modelList = [];
                            }
                        },
                    },
                },
                {
                    label: "车系:",
                    prop: "seriesIds",
                    type: "select",
                    selectList: this.seriesList,
                    selectLabel: "name",
                    selectValue: "id",
                    prototype: {
                        multiple: true,
                        collapseTags: true,
                    },
                    event: {
                        type: "change",
                        cb: (row) => {
                            if (this.notEmpty(row.seriesIds)) {
                                this.getModelName();
                            } else {
                                this.queryParams.modelIds = undefined;
                                this.modelList = [];
                            }
                        },
                    },
                },
                {
                    label: "车型:",
                    prop: "modelIds",
                    type: "select",
                    selectList: this.modelList,
                    selectLabel: "name",
                    selectValue: "id",
                    prototype: {
                        multiple: true,
                        collapseTags: true,
                    },
                },
            ];
        },
        getQuotaCarTypeTableCloumn() {
            this.tableItem = [
                {
                    label: "品牌",
                    prop: "brandName",
                },
                {
                    label: "车系",
                    prop: "seriesName",
                },
                {
                    label: "车型",
                    prop: "modelName",
                },
                {
                    label: "厂商",
                    prop: "makerName",
                },
            ];
        },
        getQuotaCarTypeList(params) {
            return new Promise((resolve) => {
                apis.QuotaCarTypeList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally((res) => {
                        resolve();
                    });
            });
        },

        // 用户
        getUserQueryForm() {
            return new Promise(async (resolve) => {
                let list = await this._getDicts("customer_level");
                this.$set(this.dicts, "customer_level", list);

                this.SearchFormItems = [
                    {
                        label: "名称:",
                        prop: "customerName",
                        type: "input",
                        placeholder: "请输入名称",
                    },
                    {
                        label: "客户等级:",
                        prop: "customerLevelCode",
                        type: "select",
                        selectLabel: "dictLabel",
                        selectValue: "dictValue",
                        selectList: this.dicts.customer_level,
                    },
                ];
                resolve();
            });
        },
        getUserTableCloumn() {
            this.tableItem = [
                {
                    label: "名称",
                    prop: "customerName",
                },
                {
                    label: "联系方式",
                    prop: "customerPhone",
                },
                {
                    label: "客户标签",
                    prop: "customerLabel",
                },
                {
                    label: "客户等级",
                    prop: "customerLevel",
                    format: (row) => {
                        let item = this.dicts.customer_level?.find(
                            (e) => e.dictValue == row.customerLevelCode
                        );
                        if (item) {
                            return item.dictLabel;
                        }
                    },
                },
            ];
        },
        getUserList(params) {
            return new Promise((resolve) => {
                apis.UserList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally((res) => {
                        resolve();
                    });
            });
        },
        getUserNoList(params) {
            return new Promise((resolve) => {
                apis.UserNoList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally((res) => {
                        resolve();
                    });
            });
        },
        getFinanceOrderList(params) {
            return new Promise((resolve) => {
                apis.FinanceOrderList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally((res) => {
                        resolve();
                    });
            });
        },
        getFinanceCarList(params) {
            return new Promise((resolve) => {
                apis.FinanceCarList(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.datalist = res.rows ?? [];
                            this.total = res.total;
                        }
                    })
                    .finally((res) => {
                        resolve();
                    });
            });
        },
        getDicts(user) {},
        reset() {
            this.initQueryParams();
            this.search();
        },
        search() {
            this.getList();
        },
        handle_sure() {
            if (this.selectArr?.length == 0) {
                this.Cancel();
                return;
            }
            this.Select(this.selectArr, this.activeType);
        },
        handle_no() {
            this.Cancel();
        },
        onCancel() {
            this.Cancel();
        },
        onSelect(res) {
            this.Select(res, this.activeType);
        },

        Select() {},
        Cancel() {},
    },
};
</script>
<style lang="scss" scoped>
>>> .el-drawer__body {
    min-height: 0;
}

.tablePage {
    // padding: 15px;
    padding-top: 15px;
}
.checkList {
    display: flex;
    gap: 0 15px;
    .item {
        padding: 7px 12px;
        border: 1px solid #8c8c8c;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
    }
    .active {
        color: #fff;
        background: #1890ff;
        border-color: #1890ff;
    }
}
.handleBox {
    display: flex;
    justify-content: flex-end;
}
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>
